<template>
  <div>
    <main>
      <router-view />
    </main>
    <footer>
      <van-tabbar route>
        <van-tabbar-item
          v-for="v in routerlist"
          :key="v.path"
          replace
          :to="v.path"
          :icon="v.icon"
          >{{ v.title }}</van-tabbar-item
        >
      </van-tabbar>
    </footer>
  </div>
</template>

<script>
import { reactive } from "@vue/reactivity";
export default {
  setup() {
    const routerlist = reactive([
      {
        path: "/logo",
        title: "首页",
        icon: "home-o",
      },
      {
        path: "/ticket",
        title: "订单",
        icon: "apps-o",
      },
      {
        path: "/role",
        title: "客服",
        icon: "other-pay",
      },
      {
        path: "/user",
        title: "我的",
        icon: "user-o",
      },
    ]);
    return { routerlist };
  },
};
</script>

<style>
main {
  margin-bottom: 60px;
  flex: 1;
  overflow: hidden;
}
footer {
  background-color: white;
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  height: 50px;
}
</style>